Use Node v12.13.0 (LTS) for development #4322

etpinard · 2019-10-30T19:33:34Z

Node v12 is now LTS, so let's start using it.

Note the node-v12 docker containers provided by CircleCI ship with Chrome v78. This makes some of our jasmine tests fail.

The failing tests are:

plotly.js/test/jasmine/tests/hover_label_test.js

Lines 2527 to 2551 in 742b83d

    
           it('should act like closest mode on ternary when cartesian is in compare mode', function(done) { 
        
               var mock = Lib.extendDeep({}, require('@mocks/ternary_fill.json')); 
        
               var gd = createGraphDiv(); 
        
               mock.data.push({y: [7, 8, 9]}); 
        
               mock.layout.xaxis = {domain: [0.8, 1], visible: false}; 
        
               mock.layout.yaxis = {domain: [0.8, 1], visible: false}; 
        
               Plotly.plot(gd, mock.data, mock.layout).then(function() { 
        
                   expect(gd._fullLayout.hovermode).toBe('x'); 
        
                   // hover over a point when that's closest, even if you're over 
        
                   // a fill, because by default we have hoveron='points+fills' 
        
                   assertLabelsCorrect([237, 150], [240.0, 144], 
        
                       'trace 2Component A: 0.8Component B: 0.1Component C: 0.1'); 
        
                   // hovers over fills 
        
                   assertLabelsCorrect([237, 170], [247.7, 166], 'trace 2'); 
        
                   // hover on the cartesian trace in the corner 
        
                   assertLabelsCorrect([363, 122], [363, 122], 'trace 38'); 
        
               }) 
        
               .catch(failTest) 
        
               .then(done); 
        
           });

This ⬆️ one can probably be fixed be tweaking the pixels values in the assertions.

plotly.js/test/jasmine/tests/colorbar_test.js

Lines 400 to 460 in 742b83d

    
           it('can drag root-level colorbars in editable mode', function(done) { 
        
               Plotly.newPlot(gd, 
        
                   [{z: [[1, 2], [3, 4]], type: 'heatmap'}], 
        
                   {width: 400, height: 400}, 
        
                   {editable: true} 
        
               ) 
        
               .then(function() { 
        
                   expect(gd.data[0].colorbar).toBeUndefined(); 
        
                   expect(gd._fullData[0].colorbar.x).toBe(1.02); 
        
                   expect(gd._fullData[0].colorbar.y).toBe(0.5); 
        
                   return drag({node: getCBNode(), dpos: [-100, 100]}); 
        
               }) 
        
               .then(function() { 
        
                   expect(gd.data[0].colorbar.x).toBeWithin(0.591, 0.01); 
        
                   expect(gd.data[0].colorbar.y).toBeWithin(0.045, 0.01); 
        
               }) 
        
               .catch(failTest) 
        
               .then(done); 
        
           }); 
        
           it('can drag marker-level colorbars in editable mode', function(done) { 
        
               Plotly.newPlot(gd, 
        
                   [{y: [1, 2, 1], marker: {color: [0, 1, 2], showscale: true}}], 
        
                   {width: 400, height: 400}, 
        
                   {editable: true} 
        
               ) 
        
               .then(function() { 
        
                   expect(gd.data[0].marker.colorbar).toBeUndefined(); 
        
                   expect(gd._fullData[0].marker.colorbar.x).toBe(1.02); 
        
                   expect(gd._fullData[0].marker.colorbar.y).toBe(0.5); 
        
                   return drag({node: getCBNode(), dpos: [-100, 100]}); 
        
               }) 
        
               .then(function() { 
        
                   expect(gd.data[0].marker.colorbar.x).toBeWithin(0.591, 0.01); 
        
                   expect(gd.data[0].marker.colorbar.y).toBeWithin(0.045, 0.01); 
        
               }) 
        
               .catch(failTest) 
        
               .then(done); 
        
           }); 
        
           it('can drag colorbars linked to color axes in editable mode', function(done) { 
        
               Plotly.newPlot(gd, 
        
                   [{z: [[1, 2], [3, 4]], type: 'heatmap', coloraxis: 'coloraxis'}], 
        
                   {coloraxis: {}, width: 400, height: 400}, 
        
                   {editable: true} 
        
               ) 
        
               .then(function() { 
        
                   expect(gd.layout.coloraxis.colorbar).toBeUndefined(); 
        
                   expect(gd._fullLayout.coloraxis.colorbar.x).toBe(1.02); 
        
                   expect(gd._fullLayout.coloraxis.colorbar.y).toBe(0.5); 
        
                   return drag({node: getCBNode(), dpos: [-100, 100]}); 
        
               }) 
        
               .then(function() { 
        
                   expect(gd.layout.coloraxis.colorbar.x).toBeWithin(0.591, 0.01); 
        
                   expect(gd.layout.coloraxis.colorbar.y).toBeWithin(0.045, 0.01); 
        
                   expect(gd._fullLayout.coloraxis.colorbar.x).toBeWithin(0.591, 0.01); 
        
                   expect(gd._fullLayout.coloraxis.colorbar.y).toBeWithin(0.045, 0.01); 
        
               }) 
        
               .catch(failTest) 
        
               .then(done); 
        
           });

This ⬆️ one is odd. Something might be up with {editable: true} colorbar drag interactions?

plotly.js/test/jasmine/tests/splom_test.js

Lines 946 to 998 in 742b83d

    
           it('@gl should clear graph and replot when canvas and WebGL context dimensions do not match', function(done) { 
        
               var fig = Lib.extendDeep({}, require('@mocks/splom_iris.json')); 
        
               fig.layout.showlegend = false; 
        
               function assertDims(msg, w, h) { 
        
                   var canvas = gd._fullLayout._glcanvas; 
        
                   expect(canvas.node().width).toBe(w, msg); 
        
                   expect(canvas.node().height).toBe(h, msg); 
        
                   var gl = canvas.data()[0].regl._gl; 
        
                   expect(gl.drawingBufferWidth).toBe(w, msg); 
        
                   expect(gl.drawingBufferHeight).toBe(h, msg); 
        
               } 
        
               var methods = ['cleanPlot', 'supplyDefaults', 'doCalcdata']; 
        
               methods.forEach(function(m) { spyOn(Plots, m).and.callThrough(); }); 
        
               function assertFnCall(msg, exp) { 
        
                   methods.forEach(function(m) { 
        
                       expect(Plots[m]).toHaveBeenCalledTimes(exp[m], msg); 
        
                       Plots[m].calls.reset(); 
        
                   }); 
        
               } 
        
               spyOn(Lib, 'log'); 
        
               Plotly.plot(gd, fig).then(function() { 
        
                   assertFnCall('base', { 
        
                       cleanPlot: 1,       // called once from inside Plots.supplyDefaults 
        
                       supplyDefaults: 1, 
        
                       doCalcdata: 1 
        
                   }); 
        
                   assertDims('base', 600, 500); 
        
                   expect(Lib.log).toHaveBeenCalledTimes(0); 
        
                   spyOn(gd._fullData[0]._module, 'plot').and.callThrough(); 
        
                   return Plotly.relayout(gd, {width: 4810, height: 3656}); 
        
               }) 
        
               .then(function() { 
        
                   assertFnCall('after', { 
        
                       cleanPlot: 3,       // 2 from supplyDefaults, once in drawFramework 
        
                       supplyDefaults: 2,  // 1 from relayout, 1 in drawFramework 
        
                       doCalcdata: 1       // once in drawFramework 
        
                   }); 
        
                   assertDims('after', 4810, 3656); 
        
                   expect(Lib.log) 
        
                       .toHaveBeenCalledWith('WebGL context buffer and canvas dimensions do not match due to browser/WebGL bug. Clearing graph and plotting again.'); 
        
               }) 
        
               .catch(failTest) 
        
               .then(done); 
        
           });

This ⬆️ one might means that one the most painful workaround in the library got fixed (see #2939)

@plotly/plotly_js I won't have time to fixup the jasmine tests before my vacation. This is not at all a high priority issue, but if you're interested in getting this merged, feel free to push to this branch.

... to make sure these version are used when making new releases

etpinard · 2019-10-30T19:34:19Z

package.json

@@ -43,7 +43,7 @@
    "start-image_viewer": "node devtools/image_viewer/server.js",
    "start": "npm run start-test_dashboard",
    "baseline": "node tasks/baseline.js",
-    "preversion": "check-node-version --node 10 --npm 6 && npm-link-check && npm ls --prod",
+    "preversion": "check-node-version --node 12.13 --npm 6.12.0 && npm-link-check && npm ls --prod",


@archmoj I chose slightly more strict version checks this time.

Now requesting for npm 6.13.x 7759c76

etpinard · 2019-11-20T22:58:56Z

@archmoj I got the test to pass on CI and locally. Tagging as reviewable !

archmoj · 2019-11-21T02:34:45Z

Thanks very much @etpinard
💃

etpinard added 4 commits October 30, 2019 14:38

use node 12.13.0 (LTS) on CircleCI

b18bf72

use node "12" on AppVeyor

dff2d0b

update Contributing to mention node v12

39c1944

set --node 12.13 and --npm 6.12 in check-node-version call

a5eba61

... to make sure these version are used when making new releases

etpinard added type: maintenance labels Oct 30, 2019

etpinard commented Oct 30, 2019

View reviewed changes

etpinard added 6 commits November 20, 2019 15:00

bump npm version check to 6.13

7759c76

Merge branch 'master' into use-node12

205f4f8

adapt "replot canvas" test for Chrome 78

97fe760

add @flaky to editable:true colorbar tests

cb5be64

round bbox widths values to workaround Chrome78 rounding errors

9ec38b1

tweak hover label px position in scatterternay fill test

00b7d30

etpinard added status: reviewable and removed status: in progress labels Nov 20, 2019

etpinard merged commit 9ee4aa7 into master Nov 21, 2019

etpinard deleted the use-node12 branch November 21, 2019 14:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Node v12.13.0 (LTS) for development #4322

Use Node v12.13.0 (LTS) for development #4322

etpinard commented Oct 30, 2019

etpinard Oct 30, 2019

etpinard Nov 20, 2019

etpinard commented Nov 20, 2019

archmoj commented Nov 21, 2019

	it('should act like closest mode on ternary when cartesian is in compare mode', function(done) {
	var mock = Lib.extendDeep({}, require('@mocks/ternary_fill.json'));
	var gd = createGraphDiv();

	mock.data.push({y: [7, 8, 9]});
	mock.layout.xaxis = {domain: [0.8, 1], visible: false};
	mock.layout.yaxis = {domain: [0.8, 1], visible: false};

	Plotly.plot(gd, mock.data, mock.layout).then(function() {
	expect(gd._fullLayout.hovermode).toBe('x');

	// hover over a point when that's closest, even if you're over
	// a fill, because by default we have hoveron='points+fills'
	assertLabelsCorrect([237, 150], [240.0, 144],
	'trace 2Component A: 0.8Component B: 0.1Component C: 0.1');

	// hovers over fills
	assertLabelsCorrect([237, 170], [247.7, 166], 'trace 2');

	// hover on the cartesian trace in the corner
	assertLabelsCorrect([363, 122], [363, 122], 'trace 38');
	})
	.catch(failTest)
	.then(done);
	});

	it('can drag root-level colorbars in editable mode', function(done) {
	Plotly.newPlot(gd,
	[{z: [[1, 2], [3, 4]], type: 'heatmap'}],
	{width: 400, height: 400},
	{editable: true}
	)
	.then(function() {
	expect(gd.data[0].colorbar).toBeUndefined();
	expect(gd._fullData[0].colorbar.x).toBe(1.02);
	expect(gd._fullData[0].colorbar.y).toBe(0.5);
	return drag({node: getCBNode(), dpos: [-100, 100]});
	})
	.then(function() {
	expect(gd.data[0].colorbar.x).toBeWithin(0.591, 0.01);
	expect(gd.data[0].colorbar.y).toBeWithin(0.045, 0.01);
	})
	.catch(failTest)
	.then(done);
	});

	it('can drag marker-level colorbars in editable mode', function(done) {
	Plotly.newPlot(gd,
	[{y: [1, 2, 1], marker: {color: [0, 1, 2], showscale: true}}],
	{width: 400, height: 400},
	{editable: true}
	)
	.then(function() {
	expect(gd.data[0].marker.colorbar).toBeUndefined();
	expect(gd._fullData[0].marker.colorbar.x).toBe(1.02);
	expect(gd._fullData[0].marker.colorbar.y).toBe(0.5);
	return drag({node: getCBNode(), dpos: [-100, 100]});
	})
	.then(function() {
	expect(gd.data[0].marker.colorbar.x).toBeWithin(0.591, 0.01);
	expect(gd.data[0].marker.colorbar.y).toBeWithin(0.045, 0.01);
	})
	.catch(failTest)
	.then(done);
	});

	it('can drag colorbars linked to color axes in editable mode', function(done) {
	Plotly.newPlot(gd,
	[{z: [[1, 2], [3, 4]], type: 'heatmap', coloraxis: 'coloraxis'}],
	{coloraxis: {}, width: 400, height: 400},
	{editable: true}
	)
	.then(function() {
	expect(gd.layout.coloraxis.colorbar).toBeUndefined();
	expect(gd._fullLayout.coloraxis.colorbar.x).toBe(1.02);
	expect(gd._fullLayout.coloraxis.colorbar.y).toBe(0.5);
	return drag({node: getCBNode(), dpos: [-100, 100]});
	})
	.then(function() {
	expect(gd.layout.coloraxis.colorbar.x).toBeWithin(0.591, 0.01);
	expect(gd.layout.coloraxis.colorbar.y).toBeWithin(0.045, 0.01);
	expect(gd._fullLayout.coloraxis.colorbar.x).toBeWithin(0.591, 0.01);
	expect(gd._fullLayout.coloraxis.colorbar.y).toBeWithin(0.045, 0.01);
	})
	.catch(failTest)
	.then(done);
	});

	it('@gl should clear graph and replot when canvas and WebGL context dimensions do not match', function(done) {
	var fig = Lib.extendDeep({}, require('@mocks/splom_iris.json'));
	fig.layout.showlegend = false;

	function assertDims(msg, w, h) {
	var canvas = gd._fullLayout._glcanvas;
	expect(canvas.node().width).toBe(w, msg);
	expect(canvas.node().height).toBe(h, msg);

	var gl = canvas.data()[0].regl._gl;
	expect(gl.drawingBufferWidth).toBe(w, msg);
	expect(gl.drawingBufferHeight).toBe(h, msg);
	}

	var methods = ['cleanPlot', 'supplyDefaults', 'doCalcdata'];

	methods.forEach(function(m) { spyOn(Plots, m).and.callThrough(); });

	function assertFnCall(msg, exp) {
	methods.forEach(function(m) {
	expect(Plots[m]).toHaveBeenCalledTimes(exp[m], msg);
	Plots[m].calls.reset();
	});
	}

	spyOn(Lib, 'log');

	Plotly.plot(gd, fig).then(function() {
	assertFnCall('base', {
	cleanPlot: 1, // called once from inside Plots.supplyDefaults
	supplyDefaults: 1,
	doCalcdata: 1
	});
	assertDims('base', 600, 500);
	expect(Lib.log).toHaveBeenCalledTimes(0);

	spyOn(gd._fullData[0]._module, 'plot').and.callThrough();

	return Plotly.relayout(gd, {width: 4810, height: 3656});
	})
	.then(function() {
	assertFnCall('after', {
	cleanPlot: 3, // 2 from supplyDefaults, once in drawFramework
	supplyDefaults: 2, // 1 from relayout, 1 in drawFramework
	doCalcdata: 1 // once in drawFramework
	});
	assertDims('after', 4810, 3656);
	expect(Lib.log)
	.toHaveBeenCalledWith('WebGL context buffer and canvas dimensions do not match due to browser/WebGL bug. Clearing graph and plotting again.');
	})
	.catch(failTest)
	.then(done);
	});

Use Node v12.13.0 (LTS) for development #4322

Use Node v12.13.0 (LTS) for development #4322

Conversation

etpinard commented Oct 30, 2019

etpinard Oct 30, 2019

Choose a reason for hiding this comment

etpinard Nov 20, 2019

Choose a reason for hiding this comment

etpinard commented Nov 20, 2019

archmoj commented Nov 21, 2019